<template>
  <el-form
    ref="formRef"
    :model="form"
    label-width="auto"
    style="max-width: 600px"
    :rules="rules"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item label="角色" prop="role">
      <el-select v-model="form.role" placeholder="please select your role">
        <el-option label="管理员" value="1" />
        <el-option label="普通用户" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="个人简介" prop="desc">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item label="头像" prop="avater">
      <el-upload
        class="avatar-uploader"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleChange"
      >
        <img v-if="form.avater" :src="form.avater" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit(formRef)">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import axios from "axios";

const formRef = ref();
const rules = reactive({
  username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
  role: [{ required: true, trigger: "blur", message: "请选择角色" }],
  avater: [{ required: true, trigger: "blur", message: "请上传头像" }],
});
const form = reactive({
  username: "test",
  password: "test",
  desc: "haha",
  role: "1",
  avater: "",
  file: null,
});

const handleChange = (file) => {
  console.log(file);
  const url = URL.createObjectURL(file.raw);
  form.avater = url;
  form.file = file.raw;
};

const onSubmit = (formEl) => {
  if (!formEl) {
    return;
  }
  formEl.validate((valid) => {
    if (valid) {
      const params = new FormData();
      for (let i in form) {
        params.append(i, form[i]);
      }
      axios.post("/admin/user/add", params, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
    }
  });
};
</script>
<style scoped lang="scss">
::v-deep {
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>
